<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>我的简历</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            background: #eee;
            margin: 20px 0;

        }

        article {
            width: 21cm;
            min-height: 29.7cm;
            background: white;
            margin: 0 auto;
            overflow: auto;
            padding: 1em;
        }
    </style>
    <style media="print">
        body {
            margin: 0;
        }

        .page2 {
            page-break-before: always;
            margin-top: 30px;
        }
    </style>
    <style>
        p {
            margin: .3em 0;

        }
        .lightHeight{
            font-size: 1em;
            color: #141413;
            font-weight: 500;
        }
        h1 {
            font-size: 1.5em;
            margin-top: 8px;
            color: #141413;
        }
        h2{
            font-size: 1.5em;
        }


        h4,
        h5,
        h6 {
            font-weight: normal;
        }

        ol,
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        strong {
            font-weight: normal;
            color: #f60;
        }

        a {
            color: #999;
            text-decoration: none;
            border-bottom: 1px solid;
        }

        p,
        li {
            color: #666;
        }

        strong {
            font-weight: normal;
        }

        h3,
        h4,
        h5,
        h6 {
            margin: 0;
        }

        .bio {
            position: relative;
        }

        .bio img {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>

    <style>
        .projects p {
            color: #666;
            display: flex;
            flex-wrap: wrap;
            line-height: 160%;
            &.lightHeight{
                font-size: 1em;
                color: #141413;
                font-weight: 500;
            }
        }

        .projects strong {
            color: #f60;
        }

        .projects>ol {
            margin-top: 0;
            list-style-position: inside;
            padding: 0;
        }

        .projects>ol>li {
            margin-bottom: 24px;
        }

        .projects>ol>li>header {
            display: flex;
            justify-content: space-between;
        }

        .projects>ol>li h3 {
            display: inline-block;
        }
    </style>
    <style>
        .openSource header img {
            position: absolute;
            top: 0;
            right: 0;
        }



        .openSource>ul>li {
            margin-bottom: 24px;
        }

        .openSource header {
            position: relative;
            display: flex;
            justify-content: space-between;
        }
    </style>
    <style>
        .jobs>ol>li {
            margin: 12px 0;
        }

        .jobs header {
            display: flex;
            color: #666;
            margin-bottom: 12px;
        }

        .jobs header>h3 {
            font-size: 18px;
            color: #333;
        }

        .jobs header>h4 {
            margin-left: 1em;
            font-size: 18px;
        }

        .jobs header>span {
            font-size: 18px;
            margin-left: auto;
        }
    </style>


    <style>
        @media (max-width: 500px) {
            body {
                margin: 0;
            }

            article {
                width: auto;
                height: auto;
            }

            .bio img {
                display: none;
            }

            .skills .wrapper {
                flex-direction: column;
            }

            .jobs header {
                flex-direction: column;
            }

            .jobs header>h3,
            .jobs header>h4,
            .jobs header>span {
                margin: 0;
            }
        }
    </style>
</head>

<body>
    <article>
        <section class="bio">
            <h1>熊静松</h1>
            <img src="https://i.ibb.co/sRfBpwR/2020-10-27-8-35-22.png" alt="" width="100" height="100">
            <p>
                男 | 30岁 | 前端开发工程师 | 西安
            </p>
            <p>
                手机：18710888072 | 微信：X874470891 | 邮箱：874470891@qq.com
            </p>
        </section>


        <section class="projects">
            <h2>项目经历</h2>

            <ol>
                <li>
                    <header>
                        <h3>Smart官网 (PC & M)</h3>
                        <span>
                                <a href="https://www.smart.cn/zh-cn/brabus">官网链接</a>
                            </span>
                    </header>
                    <p>
                        中国区官网的核心功能包含但不限于：品牌形象展示、车型展示、直播、预订购车、售后服务、车型对比、金融计算器、在线客服、登录注册等。
                    </p>


                    <p>
                        <span class="lightHeight">技术栈：</span>
                        <strong>React</strong>/<strong>SSR</strong>/<strong>TypeScript</strong>/<strong>GSAP</strong>/<strong>Threejs</strong>/<strong>Vue3</strong>/
                        <strong>Sitecore-jss</strong>/<strong>Express</strong>/<strong>Webpack</strong>/<strong>GraphQL</strong>
                    </p>
                    <p class="lightHeight">技术要点:</p>
                    <p>1. 基于sitecore-jss结合React+Express提供高度可配置制化的组件(兼容移动端/App/小程序)，使运营团队仅需修改后台配置即可重新排版、修改文案、图片、按钮、链接等，同时这些组件还可以被以H5的形式引入App和小程序(CMS系统)。</p>
                    <p>2. 使用webp等新格式图片并对js和css等资源合理构建（动态引入/css in js），配合滚动加载大幅提高#3 M端首屏加载速度（由于sitecore的特性以及历史遗留导致页面加载的资源过多且冗余）。</p>
                    <p>3. 由于集团要求必须使用专属字体，通过使用woff转woff2减少了30%体积（5.3MB->3.7MB），但依旧较大，后通过拆分字体的子集再次优化了77.3%的体积（3.7MB->859KB,两次共优化84%的体积，ps:还有优化空间，在sitecore打包数据阶段提取出所依赖的字体）。</p>
                    <p>4. 因为公司CDN缓存策略以及API响应过慢，导致车辆配置表页面首次请求时特别慢且后续请求数据更新不及时，将数据部分由SSR换为CSR渲染来保证首屏加载速度以及数据的准确性。</p>
                    <p>5. 使用gsap结合MagicScroll做出炫酷的动画（视差/序列帧/描边/镂空/反转/渐变，Threejs也涉及一些）。</p>
                    <p>6. 使用Automa 插件减少测试同学回归成本。</p>
                </li>

                <li>
                    <header>
                        <h3>Compass, Inc (远程开发)</h3>
                        <span>
                            <a href="https://www.compass.com">官网链接(需科学上网)</a>
                        </span>
                    </header>
                    <p>Compass是一家美国房地产交易公司,致力于为客户提供全方位的房地产服务,主要服务于房产经纪人，2022 年完成211,538笔交易，总价值达2,303亿美元。</p>
                    <p>
                        <span class="lightHeight">技术栈：</span>
                        <strong>React</strong>/<strong>TypeScript</strong>/<strong>MongoDB</strong>/
                        <strong>Jest</strong>/<strong>Cypress</strong>/<strong>Koa</strong>/<strong>Webpack</strong>/<strong>Circleci</strong>/<strong>AWS CDK</strong>
                    </p>
                    <p class="lightHeight">技术要点:</p>
                    <p>1. 遵循敏捷开发最佳实践规范，通过编写Circleci、Github Actions、webhook、Docker和AWS SDK等代码及配置文件完成CI、CD的搭建。</p>
                    <p>2. 鉴于业务逻辑的复杂程度和重要性，添加单元测试、e2e测试、接入data dog（监控平台）来确保代码的质量以及功能的完整性，保证日常开发的效率以及平台的正常运转的同时为将来的重构提供更多的保障。</p>
                    <p>3. 为了更好的管理通过API请求的数据状态，使用React query减少重复请求，跨组件同步状态等问题。</p>
                    <p>4. 由于业务涉及到Agent的佣金结算以及分配，为了确保金额以及分配的正确性，使用Formik结合Yup使复杂的表单校验变得更易维护与优雅。</p>
                    <p>5. 合理创建user story 拆分task,定期复盘和记录技术债确保风险可控。</p>
                </li>

                <li class="page2">
                    <header>
                        <h3>阿里云</h3>
                        <span>
                            <a href="https://cddc.console.aliyun.com/dedicated/group/overview?RegionId=cn-hangzhou">上线地址</a>
                        </span>
                    </header>
                    <p>阿里云是全球知名云服务商,为全球企业和开发者提供灵活、高效、安全的云服务。</p>
                    <p>
                        <span class="lightHeight">技术栈：</span>
                        <strong>React</strong>/<strong>TypeScript</strong>/<strong>Vue</strong>/<strong>Node</strong>/<strong>微服务</strong>/<strong>Eacharts</strong>
                    </p>
                    <p class="lightHeight">技术要点</p>
                    <p>1. 使用微服务架构，提高模块复用性以及减少构建成本的同时提高不同团队和不同技术栈的协作问题和降低噪音。</p>
                    <p>2. 通过配置文件结合管理平台（软编码），提供自定义国际化（多语言支持），可快速更新，无需发布。</p>
                    <p>3. 使用Eacharts绘制各项监控图表，同时使用useMemo图表组件，减少不必要的性能消耗。</p>
                    <p>4. 使用Nodejs编写CLI工具，该工具可以通过爬虫进行数据汇总，生成web页面使开发人员仅需微调页面表单内容即可完成，日常发布文档、测试文档、日报、周报、冲刺计划等工作。</p>
                </li>
                <li >
                    <header>
                        <h3>个人网站 (NextJs)</h3>
                        <span>
                            <a href="https://github.com/aslan-alt/nextjs-typeorm-web">源码链接</a>
                        </span>
                    </header>

                    <p>
                        <span class="lightHeight">技术栈：</span>
                        <strong>NextJs</strong>/<strong>TypeORM</strong>/
                        <strong>PostgreSQL</strong>/<strong>Docker</strong>/
                        <strong>Nginx</strong>/<strong>TypeScript</strong>/<strong>OpenAI</strong>/<strong>Jest</strong>/<strong>Circleci</strong></p>
                    <p class="lightHeight">技术要点:</p>
                    <p>1. 使用Nextjs搭建网站(备案过期，正在处理)，从而提供了灵活的渲染选项（SSR、SSG、CSR）、自动化代码拆分、约定式路由（不需要手动配置路由）、强大的可拓展能力、强大的生态。</p>
                    <p>2. 接入OpenAI实现自己的chatBot，为了克服网络问题，使用腾讯云函数创建自己的代理服务，保障API的正常调用。</p>
                    <p>3. 接入TypeORM操作PostgreSQL，实现backend数据存储。</p>
                    <p>4. 支持GitHub授权登录，使用户更加方便登录。</p>
                    <p>5. 后续准备接入腾讯云SDK操作对象存储（Bucket）管理素材库。</p>
                </li>
                <li>
                    <header>
                        <h3>鲨鱼记账 (Vue)</h3>
                        <span>
                            <span>
                                <a href="https://gitee.com/xiong-jingsong/shark-ts-code">源码链接</a>
                                <a href="http://xiong-jingsong.gitee.io/shark-website">项目预览</a>
                            </span>
                        </span>
                    </header>
                    <p>因为早期做的Vue项目无法被外部访问，所以这里放上以前学习Vue时，使用Vue实现的鲨鱼记账。</p>
                    <p>通过学习Vue 让我学到更多的js特性如Vue2的Object.defineProperty和Vue3的Proxy。</p>
                </li>

                <li>
                    <header>
                        <h3>telegram机器人 (Python)</h3>
                    </header>
                    <p>
                        一个<strong>Python</strong>开发的程序，通过telegram官方提供的api,以及python的多个第三方库实现。
                    </p>
                    <p>该机器人可以自动爬取关键数据定时发布更新运营报表。</p>
                    <p>管理人员可通过指令对其后台页面进行用户信息查看,修改等一系列<strong>自动化</strong>操作。</p>
                    <p>自动填写excel表格以及对web端重复的劳动都可通过机器人关键指令完成，发现后台异常，发送相关管理人员</p>
                </li>
            </ol>
        </section>

        <section class="skills">
            <h2>技能</h2>
            <div class="wrapper">
                <ul>
                    <li>
                        语言: <strong>JavaScript</strong>/<strong>TypeScript</strong> /<strong>Node</strong> /<strong>Python</strong> /<strong>Java</strong>
                    </li>
                    <li>
                        框架: <strong>React 全家桶</strong>/<strong>Vue 全家桶</strong>/<strong>NextJs</strong>/<strong>Express</strong>/<strong>Koa</strong>/<strong>gRPC</strong>/<strong>Thrift</strong>
                    </li>
                    <li>
                        测试: <strong>Jest</strong>/<strong>Cypress</strong>/<strong>Mocha</strong>/<strong>Circleci</strong>
                    </li>
                    <li>
                        打包: <strong>Webpack</strong>/<strong>Bazel(跨语言)</strong>
                    </li>
                    <li>
                        其他: <strong>Docker</strong>/<strong>PostgreSQL</strong>/<strong>MongoDB</strong>/<strong>GraphQL</strong>
                    </li>

                </ul>
            </div>
        </section>

        <section class="jobs page2">
            <h2>工作经历</h2>
            <ol>
                <li>
                    <header>
                        <h3>北京联合利泰 (smart官网)</h3>
                        <h4>前端开发工程师</h4>
                        <span><time>2023年3月</time>~<time>至今</time></span>
                    </header>
                    <ul>
                        <li>1. 负责官网的需求评审，技术评审，合理规划每个迭代可吸收的需求数量,确保按时交付。</li>
                        <li>2. 进入项目后利用熟悉项目代码的时间分析并记录现有问题。（被项目采纳并且落地）</li>
                        <li>3. 负责官网整体优化，制定优化方案 -> 技术宣讲 -> 拆分技术story -> 工时评估 -> 落地执行。</li>
                        <li>4. 重构车辆配置以及#3页面，参与#3Brabus页面的设计和落地。</li>
                        <li>5. 编写技术文档并且定期更新README,由于sitecore在国内用的比较少,一个好的技术文档可以让小伙伴更好接手。</li>
                        <li>6. 不定期分享知识和小技巧给团队的小伙伴，也可能是好用的工具，总之只要能让大家用起来爽的东西都会分享。</li>
                    </ul>
                </li>
                <li>
                    <header>
                        <h3>Compass(美国远程)</h3>
                        <h4>前端开发工程师</h4>
                        <span><time>2021年8月</time>~<time>2023年1月</time></span>
                    </header>
                    <ul>
                        <li>1. Feature Owner: 将复杂的Feature拆分为更容易执行的Task，协助QA编写test case(e2e)。</li>
                        <li>2. onCall: 解决优先级更高的线上问题,修复其它APP更新带来e2e的错误,保持e2e的稳定。</li>
                        <li>3. 重构: 将一些为赶需求而快速实现但存在某些问题的代码进行重构（技术债修复）。</li>
                        <li>4. 调研: 调研新技术并且编写wiki文档,积极分享知识，乐于听取建议，帮助他人成长同时巩固自身。</li>
                        <li>5. 主持技术讨论、线上团建、定期复盘、业务分享等活动。</li>
                    </ul>
                </li>
                <li >
                    <header>
                        <h3>西安软通动力网络技术有限公司</h3>
                        <h4>前端开发工程师</h4>
                        <span><time>2020年11月</time>~<time>2021年8月</time></span>
                    </header>
                    <ul>
                        <p>1. 帮助小伙伴解决开发中遇到的问题,对实习生进行培训</p>
                        <p>2. 针对项目开发专属的工具包,提高小伙伴的开发效率</p>
                        <p>3. 找出项目中存在的问题,并给出建议和优化方案</p>
                        <p>4. 负责完成日常需求，bug修复,优化代码,及时发现存在问题的代码进行重构,避免增加后期开发成本</p>
                    </ul>
                </li>
            </ol>
        </section>

        <section class="others">
            <h2>其他链接</h2>
            <ul>
                <li><a href="https://juejin.im/user/2242659452457454/posts">我的博客</a></li>
                <li><a href="https://github.com/aslan-alt">我的 GitHub</a></li>
                <li><a href="https://github.com/ant-design/ant-design/issues/45482">最近被采纳的issue</a></li>
            </ul>
        </section>

        <section class="education">
            <h2>教育经历</h2>
            <p>
                <span><time>2017年</time></span>
                西安交通大学 专科
            </p>
            <p>
                <span><time>2022年</time></span>
                西安电子科技大学 本科
            </p>
        </section>

    </article>

</body>

</html>
